<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/jquery.fancybox.css" />
<!--<link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/css/metro-gallery.css" />
<!--<link rel="stylesheet" type="text/css" href="assets/metr-folio/css/metro-gallery.css" media="screen" />-->            

<div class="row-fluid">
    <div class="span12">
        <!-- BEGIN SAMPLE FORMPORTLET-->
        <div class="widget green">
            <div class="widget-title">
                <h4><i class="icon-camera"></i> Galleria</h4>
                <span class="tools">
                    <a href="javascript:;" class="icon-chevron-down"></a>
                    <!--<a href="javascript:;" class="icon-remove"></a>-->
                </span>
            </div>
            <div class="widget-body">
                <div class="megaexamples">
                    <!--  FILTER STYLED  -->
                    <div class="filter_padder" >
                        <div class="filter_wrapper">
                            <div class="filter selected" data-category="cat-all">Todo</div>
                            <?php foreach ($categoria as $key => $value): ?>
                                <div class="filter" data-category="<?php echo $value->nombre ?>"><?php echo $value->nombre ?></div>
                            <?php endforeach; ?>

                            <!--                            <div class="filter" data-category="cat-one">CATEGORY ONE</div>
                                                        <div class="filter" data-category="cat-two">CATEGORY TWO</div>
                                                        <div class="filter" data-category="cat-three">CATEGORY THREE</div>
                                                        <div class="filter last-child" data-category="cat-four">CATEGORY FOUR</div>-->
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="metro-gallery">
                        <!-- The GRID System -->
                        <div class="metro-gal-container noborder norounded dark-bg-entries">

                            <!-- A GALLERY ENTRY -->
                            <?php foreach ($model as $key => $value) : ?>
                                <?php // echo $value->nombre.'--'.$value->categoria.'--'.$value->foto.'<br>'?>
                                <div class="mega-entry <?php echo $value->categoria ?> cat-all"  id="mega-entry-1" data-src="<?php echo $value->foto != NULL ? Yii::app()->baseUrl . '/images/productos/' . $value->foto : " http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" ?>" data-width="780" data-height="585">

                                    <div class="mega-covercaption mega-square-top mega-landscape-left mega-portrait-top mega-green ">
                                        <div class="mega-title"><img src="<?php echo Yii::app()->baseUrl; ?>/img/gallery/icons/leaf.html" alt="" style="float: left; padding-right: 15px;"/>Hi Boss !</div>
                                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros...</p>
                                    </div>

                                    <!-- The Link Buttons -->
                                    <div class="mega-coverbuttons">
                                        <div class="mega-link mega-green producto" producto="<?php echo $value->id ?>"></div>
                                        <a class="fancybox" rel="group" href="<?php echo $value->foto != NULL ? Yii::app()->baseUrl . '/images/productos/' . $value->foto : "#" ?>" title="<?php echo $value->descripcion? : 'No hay descripcion' ?>"><div class="mega-view mega-green"></div></a>
                                    </div>

                                </div>
                            <?php endforeach; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END SAMPLE FORM PORTLET-->
    </div>
</div>

<!-- END PAGE CONTENT-->
<script src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.fancybox.pack.js" type="text/javascript"></script>
<!--<script src="assets/fancybox/source/jquery.fancybox.pack.js"></script>-->

<!-- MEGAFOLIO PRO GALLERY JS FILES  -->
<script src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.metro-gal.plugins.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="assets/metr-folio/js/jquery.metro-gal.plugins.min.js"></script>-->
<script src="<?php echo Yii::app()->baseUrl; ?>/js/jquery.metro-gal.megafoliopro.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="assets/metr-folio/js/jquery.metro-gal.megafoliopro.js"></script>-->

<script type="text/javascript">

    jQuery(document).ready(function() {

        var api = jQuery('.metro-gal-container').megafoliopro(
                {
                    filterChangeAnimation: "pagebottom", // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
                    filterChangeSpeed: 400, // Speed of Transition
                    filterChangeRotate: 99, // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
                    filterChangeScale: 0.6, // Scale Animation Endparameter
                    delay: 20,
                    defaultWidth: 980,
                    paddingHorizontal: 10,
                    paddingVertical: 10,
                    layoutarray: [13], // Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.
                });

        // FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
        jQuery(".fancybox").fancybox();

        // THE FILTER FUNCTION
        jQuery('.filter').click(function() {
            jQuery('.filter').each(function() {
                jQuery(this).removeClass("selected")
            });
            api.megafilter(jQuery(this).data('category'));
            jQuery(this).addClass("selected");
        });

        $(".producto").on('click', function() {
            $.getJSON(baseUrl + 'productos/ordenCompra/buscarOrden?id=' + $(this).attr('producto'), function(e) {
console.log('veridico'+e);
                if (e!='si') {
                    alert('La orden ya tiene este producto');
                }
            }).done(function(data) {
                if(data=='si'){
                    bootbox.alert("Productor agregado correctamente")
                }
        console.log('otro'+data);
            });
//        alert($(this).attr('producto'));
        })

    });

</script>